<template>
    <div style="height: 100%">
        <!-- 页面布局 -->
        <el-row style="height: 100%; padding: 20px">
            <!-- 基本信息 -->
            <el-col :span="14" style="height: 100%">
                <el-form label-position="left">
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="账户ID：" label-width="120px">
                                <span class="form-content">{{loginInfo.userId}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="账户名称：" label-width="120px">
                                <span class="form-content">{{loginInfo.userName}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <div @mouseenter="showPasswordLink()" @mouseleave="hidePasswordLink()">
                                <el-form-item label="账户密码：" label-width="120px">
                                    <span class="form-content">********</span>
                                    <transition name="el-fade-in-linear">
                                        <el-link type="primary" icon="el-icon-edit" :underline="false" style="margin-left: 20px" v-if="passwordlinkVisible" @click="dialogVisible=true">更改密码</el-link>
                                    </transition>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="账户权限：" label-width="120px">
                                <span class="form-content">{{loginInfo.role.levelDescribe?loginInfo.role.levelDescribe:''}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="创建日期：" label-width="120px">
                                <span class="form-content">{{loginInfo.registerDate}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="上次登录日期：" label-width="120px">
                                <span class="form-content">{{loginInfo.loginTime}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="上次登录IP：" label-width="120px">
                                <span class="form-content">{{ loginInfo.loginIp }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <div>
                                <el-form-item label="账户简介：" label-width="120px">
                                    <el-input type="textarea" :rows="6" placeholder="请输入账户简介..." resize="none" style="width: 70%" v-model="loginInfoForm.userDescribe" @input="describeCheck()"></el-input>
                                    <transition name="el-fade-in-linear">
                                        <div class="handle-box" style="width: auto" v-if="describeLinkVisible">
                                            <el-link type="primary" icon="el-icon-check" :underline="false" @click="submitDescribe()">提交</el-link>
                                            <el-link type="warning" icon="el-icon-close" :underline="false" @click="revokeDescribe()">取消</el-link>
                                        </div>
                                    </transition>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <!-- 头像 -->
            <el-col :span="8" style="height: 500px">
                <el-container style="height: 100%">
                    <el-main>
                        <el-row type="flex" align="middle" justify="start">
                            <el-col :span="16" class="img-box">
                                <transition name="el-fade-in-linear">
                                    <div class="shadow-background" v-if="shadowVisible" @mouseleave="hideShadow()">
<!--                                        <el-upload action="/api/userManage/updateProfile"-->
                                        <el-upload action="/userManage/updateProfile"
                                                   :headers="headers"
                                                   :data="{userId: this.loginInfoForm.userId}"
                                                   :show-file-list="false"
                                                   :on-success="this.onUploadSuccess">
                                            <el-button icon="el-icon-upload" size="small">上传头像</el-button>
                                        </el-upload>
                                    </div>
                                </transition>
                                <el-image class="img-profile" :src="profileURL" fit="cover" @mouseenter="showShadow()">
                                    <el-image class="img-profile" slot="error" :src="require('../artsSource/default_profile.jpg')" fit="cover" @mouseenter="showShadow()"></el-image>
                                </el-image>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-col>
        </el-row>
        <!-- Dialog -->
        <el-dialog title="更改密码" width="35%" :visible.sync="dialogVisible" @close="closeDialog">
            <el-form :model="pwdForm" status-icon :rules="pwdRule" ref="pwdSetting" label-width="100px">
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="曾用密码：" prop="oldPwd">
                            <el-input type="password" v-model="pwdForm.oldPwd" autocomplete="off" show-password></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="新密码：" prop="newPwd">
                            <el-input type="password" v-model="pwdForm.newPwd" autocomplete="off" show-password></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="确认新密码：" prop="checkPwd">
                            <el-input type="password" v-model="pwdForm.checkPwd" autocomplete="off" show-password></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="end">
                    <el-col :span="4">
                        <el-button @click="resetForm">重置</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" @click="submitSetting" v-loading.fullscreen.lock="submitLoading">提交</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {mapActions,mapState} from "vuex";

export default {
    name: "Me",
    data() {
        let validatePassLine1 = (rule, value, callback) => {
            if(value === ''){
                callback(new Error('请输入曾用密码'));
            }else{
                callback();
            }
        };
        let validatePassLine2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else {
                if (this.pwdForm.checkPwd !== '') {
                    this.$refs.pwdSetting.validateField('checkPwd');
                }
                callback();
            }
        };
        let validatePassLine3 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入新密码'));
            } else if (value !== this.pwdForm.newPwd) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            headers: {
                authorization: window.sessionStorage.getItem("tokenStr")
            },
            passwordlinkVisible: false,
            describeLinkVisible: false,
            shadowVisible: false,
            dialogVisible: false,
            submitLoading: false,
            loginInfoForm: {},
            profileURL: '',
            pwdForm: {
                oldPwd: '',
                newPwd: '',
                checkPwd: ''
            },
            pwdRule: {
                oldPwd: [
                    {min: 6, max: 15, message: '长度在8-15个字符之间', trigger: 'blur'},
                    {validator: validatePassLine1, trigger: 'blur'}
                ],
                newPwd: [
                    {min: 6, max: 15, message: '长度在8-15个字符之间', trigger: 'blur'},
                    {validator: validatePassLine2, trigger: 'blur'},
                ],
                checkPwd: [
                    {min: 6, max: 15, message: '长度在8-15个字符之间', trigger: 'blur'},
                    {validator: validatePassLine3, trigger: 'blur'}
                ]
            }
        }
    },
    computed: {
        ...mapState({
            loginInfo: state => state.static.loginInfo
        })
    },
    methods: {
        ...mapActions([
            'submitInfoSetting',
            "submitPwdSetting",
            "updateLoginInfo",
        ]),
        showPasswordLink() {
            this.passwordlinkVisible = true;
        },
        hidePasswordLink() {
            this.passwordlinkVisible = false;
        },
        describeCheck(){
            if(this.loginInfo.userDescribe){
                this.describeLinkVisible = this.loginInfo.userDescribe.trim() !== this.loginInfoForm.userDescribe.trim();
            }else{
                this.describeLinkVisible = true
            }
        },
        submitDescribe(){
            this.submitInfoSetting(this.loginInfoForm).then((resp)=>{
                if(resp){
                    //如果修改成功,则关闭handle-box的显示
                    this.describeLinkVisible = false;
                }
            }).catch(error => {
                //不做处理
            })
        },
        revokeDescribe(){
            this.loginInfoForm.userDescribe = this.loginInfo.userDescribe;
            this.describeLinkVisible = false;
            this.$message.info("撤销修改");
        },
        getProfile(){
            //加入变化的time,防止因为url未变化而略过请求新图像过程的情况
            // this.profileURL = '/api/user/profile?time=' + new Date() + '&id=' + this.loginInfoForm.userId;
            this.profileURL = '/user/profile?time=' + new Date() + '&id=' + this.loginInfoForm.userId;
        },
        onUploadSuccess(response,file,fileList){
            //按返回code决定message的显示
            switch (response.code){
                case 200: this.$message.success(response.message);break;
                case 500: this.$message.error(response.message);break;
            }
            //重载图像
            this.getProfile();
        },
        closeDialog(){
            this.dialogVisible = false;
            this.$message.info("取消密码修改");
        },
        submitSetting(){
            this.$refs.pwdSetting.validate((valid) => {
                if(valid){
                    if(this.pwdForm.newPwd===this.pwdForm.checkPwd){
                        if(this.pwdForm.newPwd!==this.pwdForm.oldPwd){
                            this.submitLoading = true;
                            //深拷贝后进行MD5加密
                            let PwdParam = JSON.parse(JSON.stringify(this.pwdForm));
                            PwdParam.oldPwd = this.$md5(PwdParam.oldPwd);
                            PwdParam.newPwd = this.$md5(PwdParam.newPwd);
                            this.submitPwdSetting(PwdParam).then((resp)=>{
                                //清除原有的登录数据
                                window.sessionStorage.removeItem('tokenStr');
                                window.sessionStorage.removeItem('loginInfo');
                                this.updateLoginInfo({});
                                setTimeout(()=>{
                                    this.submitLoading = false;
                                    this.$router.replace('/login');
                                },1000);
                            }).catch(error=>{
                                //不作处理
                            })
                        }else{
                            this.$message.error("新旧密码一致");
                        }
                    }else{
                        this.$message.error("请再次确认密码");
                    }
                }else{
                    this.$message.error("验证不通过");
                }
            })
        },
        resetForm(){
            this.$refs.pwdSetting.resetFields();
        },
        showShadow(){
            this.shadowVisible = true;
        },
        hideShadow(){
            this.shadowVisible = false;
        }
    },
    mounted() {
        //赋值账户信息到Form中
        this.loginInfoForm = JSON.parse(JSON.stringify(this.loginInfo))
        //获取头像
        this.getProfile();
    }
}
</script>

<style scoped>
.form-content{
    border-bottom: 1px solid #e4e4e4
}

.shadow-background{
    width: 252px;
    height: 252px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    left: -2px;
    background-color: #1d1e20cc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-box{
    display: flex;
    align-items: center;
    justify-content: left;
}

.img-profile{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 4px #00000033, 0 16px 20px 2px #00000024, 20px 3px 20px 0px #0000001f;
}

/deep/ .el-form-item__content{
    align-items: flex-end;
}

.handle-box{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
}

.handle-box > a{
    margin-left: 20px;
}

</style>